<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="/js/axios.min.js"></script>
  <script src="/js/util.js"></script>
    <script>
        var id = getQuery("id");
        window.onload = function (){
            findGrade();
            findById();
        }
        function findGrade(){
        axios.get("/grade/findAll",null).then(e=>{
            var info = e.data;
            var str ="";
            str+=`<div style="display: flex">`
            for (var i=0;i<info.length;i++){
                str+=`<input type='checkBox' name="gradeArray" style="margin-left: 5px" value="${info[i].id}">${info[i].grade}`
            }
            $("gradeList").innerHTML = str;
        });
    }
        async function findById(){
           await axios.get("/role/findById",{
                params:{
                    id
                }
            }).then(e=>{
                var info = e.data;
                $("findById").style.display = "block";
                $("name").innerHTML =info.name;

                for (var i=0;i<info.gradeBeanList.length;i++){
                    var obj= info.gradeBeanList[i];
                    document.querySelector("#gradeList [name='gradeArray'][value='"+ obj.id +"']")
                        .checked = true;
                }
            })
        }

        function getItem(){
            var idArray = [];
            var boxList = document.querySelectorAll(
                "#gradeList [name='gradeArray']:checked"
            );
            for (var i=0;i<boxList.length;i++){
                idArray.push(boxList[i].value);
            }
            return idArray;
        }
         function updateGrade(){


            var params = new URLSearchParams();
            params.append("id",id);
            params.append("gradeArray",getItem());
             axios.post("/role/update",params).then(e=>{
                if (e.data =="ok"){
                    location.href="/role/role.html"
                }
            })
        }
    </script>
</head>

<body>
<h2>修改角色权限</h2>
<div style="width: 600px;height: 400px;margin: 0 auto;display: none;background-color: yellow" id="findById">
  角色名称:<span id="name"></span><br>
  拥有权限:<div id="gradeList"></div>
  <input type="button" onclick="updateGrade()" value="确定">
</div>
</body>
</html>